<template>
	<view class="messageContainer"  :style="{ height: messageList.length > 0 ? '100%':'100vh' }">
		<!-- <scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }"> -->
		<block v-if="messageList.length > 0">
			<scroll-view :scroll-y="isScroll" :style="{ height: windowHeight + 'px' }"@scrolltolower="lower" :scroll-top="scrollTop">
				<block v-for="item,index in messageList" :key="index">
					<view :data-index="index" class="messageItem" @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="{ right: item.right + 'rpx' }">
						<view class="messageBox" :style="{'margin-right':item.marginRight}" @click="showDetailDialog(item)">
							<view class="messageTit txtOverFlow2 flex" :style="{ color: item.isRead == 1 ? '#999999' : '#222222'}">
								{{item.noticeTheme}}
								<!-- isRead是否已读：1已读；0未读 -->
								<view class="redCircle" v-show="item.isRead == 0"></view>
							</view>
							<view class="messageContent" :style="{ color: item.isRead == 1 ? '#999999' : '#222222'}">{{item.noticeDesc}}</view>
							<view class="messageTime flex">
								<image src="../../static/images/timeIcon.png" class="timeIcon"></image>
								<view>{{item.updateTime}}</view>
							</view>
						</view>
						<view class="removeBtn" @click="delItem(item.noticeId)" :style="{ right: item.btnRight + 'rpx' }">删除</view>
					</view>
				</block>
			</scroll-view>
			<image src="../../static/images/clearIcon.png" class="clearIcon" @click="clearAllMessage()"></image>
		</block>
		<view v-else class="noDataTxt">暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [],
				isScroll: true,
				windowHeight: 0,
				scrollTop: 0,
				delBtnWidth: 110,
				startX: 0,
				page: 1,
				limit: 5,
				hasMoreData: false,//是否还有更多数据
				
			}
		},
		onLoad() {
			let _this = this;
			wx.getSystemInfo({
				success: function(res) {
					_this.windowHeight = res.windowHeight;
				}
			})
		},
		onShow() {
			this.searchMessageList();
		},
		onPullDownRefresh() {
			this.searchMessageList();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			searchMessageList() {
				let _this = this;
				_this.$utils.requestFun('/stadium/messageNoticeLog/api/getNoticeListFront', {
					token: getApp().globalData.token,
					page: _this.page,
					limit: _this.limit
				}, 'GET').then(res => {
					let messageListData = _this.messageList;
					if(res.data.data.data && res.data.data.data.length > 0) {
						if(_this.page == 1) {
							messageListData = [];
						}
						let messageList = res.data.data.data;
						for(let i = 0;i<messageList.length;i++) {
							messageList[i].updateTime = _this.$utils.getDateDiff(messageList[i].modifyTime);
						}
						if(messageList.length < _this.limit) {
							_this.messageList = messageListData.concat(messageList);
							_this.hasMoreData = false;
						}else {
							_this.messageList = messageListData.concat(messageList);
							_this.hasMoreData = true;
							_this.page = _this.page++;
						}
					}else {
						if(_this.page == 1) {
							_this.messageList = [];
						}else {
							_this.messageList = messageListData;
						}
					}
				});
			},
			lower(e) {
				if (this.hasMoreData) {
					let page = this.page+1;
					this.page = page;
					this.searchMessageList();
				} else {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				}
			},
			//弹出消息详情
			showDetailDialog(item) {
				let _this = this;
				uni.showModal({
					title: item.noticeTheme,
					content: item.noticeDesc,
					showCancel: false,
					confirmText: '关闭',
					success: function() {
						if(item.isRead == 0) {//是否已读：1已读；0未读
							_this.$utils.requestFun('/base/notice/api/updateNoticeIsRead?routh=curriculum', {
								token: getApp().globalData.token,
								noticeId: item.noticeId
							}, 'GET').then(res => {
								_this.page = 1;
								_this.searchMessageList();
							});
						}
					}
				})
			},
			//滑动动画-----------------
			drawStart: function(e) {
				var touch = e.touches[0];
				for (var index in this.messageList) {
					this.messageList[index].right = 0;
					// this.messageList[index].messageBoxBorderRadius = '15rpx 0px 0px 15rpx';
					this.messageList[index].marginRight = '0px';
					this.messageList[index].btnRight = '-118';
				}
				this.startX = touch.clientX;
			},
			drawMove: function(e) {
				var touch = e.touches[0];
				var item = this.messageList[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
	
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.isScroll = false;
					this.messageList[e.currentTarget.dataset.index].right = disX;
					this.messageList[e.currentTarget.dataset.index].marginRight = '0px';
					this.messageList[e.currentTarget.dataset.index].btnRight = '-80';
					// this.messageList[e.currentTarget.dataset.index].messageBoxBorderRadius = '15rpx 0px 0px 15rpx';
				} else {
					this.isScroll = true;
					this.messageList[e.currentTarget.dataset.index].right = 0;
					this.messageList[e.currentTarget.dataset.index].marginRight = '30rpx';
					this.messageList[e.currentTarget.dataset.index].btnRight = '-118';
					// this.messageList[e.currentTarget.dataset.index].messageBoxBorderRadius = '15rpx';
				}
			},
			drawEnd: function(e) {
 				var item = this.messageList[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.isScroll = true;
					this.messageList[e.currentTarget.dataset.index].right = this.delBtnWidth;
					// this.messageList[e.currentTarget.dataset.index].messageBoxBorderRadius = '15rpx 0px 0px 15rpx';
				} else {
					this.isScroll = true;
					this.messageList[e.currentTarget.dataset.index].right = 0;
					// this.messageList[e.currentTarget.dataset.index].messageBoxBorderRadius = '15rpx';
				}
			},
			delItem(noticeId) {
				let _this = this;
				_this.$utils.requestFun('/base/notice/api/userDelNoticeFront?routh=curriculum', {
					token: getApp().globalData.token,
					noticeId: noticeId
				}, 'GET').then(res => {
					uni.showToast({title: '删除成功！', icon: 'none',success() {
						setTimeout(()=> {
							_this.page = 1;
							_this.searchMessageList();
						},1000)
					}});
				});
			},
			//清除所有消息
			clearAllMessage() {
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '是否确认清空所有消息？',
				    success: function (res) {
				        if (res.confirm) {
				            _this.requestClearAllMessage();
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			requestClearAllMessage() {
				let _this = this;
				_this.$utils.requestFun('/base/notice/api/userDelNoticeAllFront?routh=curriculum', {
					token: getApp().globalData.token
				}, 'GET').then(res => {
					uni.showToast({title: '删除成功！', icon: 'none',success() {
						setTimeout(()=> {
							_this.page = 1;
							_this.searchMessageList();
						},1000)
					}});
				})
			}
		}
	}
</script>

<style>
	.messageContainer {
		width: 100%;
		height: 100%;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		background: #F6F6F6;
	}
	.flex {
		display: flex;
	}
	.txtOverFlow2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow:ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.noDataTxt {
		color: #999999;
		text-align: center;
		margin: 100rpx 0;
		line-height: 200rpx;
	}
	.messageBox {
		width: 86.5%;
		min-height: 150rpx;
		background-color: #FFFFFF;
		margin: 20rpx 30rpx;
		padding: 20rpx;
		border-radius: 15rpx;
	}
	.messageTit {
		font-size: 34rpx;
		font-weight: bold;
		color: #222222;
		margin-top: 15rpx;
		line-height: 50rpx;
	}
	.messageContent {
		font-size: 26rpx;
		color: #444444;
		margin-top: 30rpx;
		line-height: 44rpx;
	}
	.messageTime {
		margin-top: 36rpx;
		font-size: 24rpx;
		color: #BBBBBB;
	}
	.timeIcon {
		width: 23rpx;
		height: 23rpx;
		margin-right: 10rpx;
		margin-top:8rpx;
	}
	
	.messageItem {
	    min-height: 240rpx;
	    width: 100%;
	    display: flex;
	    position: relative;
	}
	
	.removeBtn {
		width: 110rpx;
		height: 88%;
		background-color: #FE3C32;
		border-radius: 0px 15rpx 15rpx 0px;
		color: #FFFFFF;
		position: absolute;
		top: 10px;
		right: -118rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	
	.redCircle {
		width: 16rpx;
		height: 16rpx;
		background: red;
		border-radius: 50%;
		position: absolute;
		right: 48rpx;
		margin-top: -66rpx;
	}
	.clearIcon {
		position: fixed;
		bottom: 20%;
		right: 30rpx;
		width: 80rpx;
		height: 80rpx;
		border: 2px solid #1EBE85;
		border-radius: 50%;
	}
</style>
